<template>
  <div class="pagination">
    <!-- 第一部分 -->
    <button @click="$emit('currentPage', pageNo -1)" :disabled="pageNo <= 1">上一页</button>
    <button v-if="startAndEndNumber.start > 1" @click="$emit('currentPage', 1)">1</button>
    <button v-if="startAndEndNumber.start > 2">...</button>
    <!-- 中间部分 -->
    <button v-for="(page, index) in startAndEndNumber.end" :key="index" v-if="page >= startAndEndNumber.start"
      @click="$emit('currentPage', page)" :class="{active:pageNo == page}">{{ page }}</button>
    <!-- 最后部分 -->
    <button v-if="startAndEndNumber.end < totalPage - 1">···</button>
    <button v-if="startAndEndNumber.end < totalPage" @click="$emit('currentPage', totalPage)">{{ totalPage }}</button>
    <button @click="$emit('currentPage', pageNo + 1)" :disabled="pageNo == totalPage">下一页</button>

    <button style="margin-left: 30px">共 {{ total }} 条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  data() {
    return {
    }
  },
  props: [
    'pageNo', //当前页
    'pageSize', // 条数
    'total', //总数
    'pager' // 分页显示的页数,比如pager=5，pageNo=6，则显示 1 ... 4 5 6 7 8 ... 总页数 
  ],
  computed: {
    // 总页数
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    },
    /**
     * 计算分页显示的起始和结束页码
     * 
     * 本函数旨在确定在当前页码和总页数给定的条件下，显示在用户界面上的页码范围
     * 当总页数小于等于分页显示的页数时，从第1页开始，到总页数结束
     * 当总页数大于分页显示的页数时，尝试将当前页码居中显示在页码列表中
     * 如果计算出的起始页小于1，结束页将调整为分页显示的页数，起始页设为1
     * 如果计算出的结束页大于总页数，起始页将调整为总页数减去分页显示的页数加1，结束页设为总页数
     * 
     * @returns {Object} 包含起始页和结束页的对象
     */
    startAndEndNumber() {
      let start, end
      const { pageNo, pager, totalPage } = this
      if (totalPage <= pager) {
        // 总页数小于等于分页显示的页数，从第1页开始，到总页数结束
        start = 1
        end = totalPage
      } else {
        // 总页数大于分页显示的页数，尝试将当前页码居中显示在页码列表中
        start = pageNo - Math.floor(pager / 2)
        end = pageNo + Math.floor(pager / 2)
        if (start < 1) {
          // 如果计算出的起始页小于1，结束页将调整为分页显示的页数，起始页设为1
          end = pager
          start = 1
        } else if (end > totalPage) {
          // 如果计算出的结束页大于总页数，起始页将调整为总页数减去分页显示的页数加1，结束页设为总页数
          start = totalPage - pager + 1
          end = totalPage
        }
      }
      return { start, end }
    }
  }

}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;

  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>